<template>
	<view class="progress-box" :style="{ 'height': `${props.height}rpx`, 'backgroundColor': props.inactiveColor }">
		<view class="progress-box-active" :class="{ 'reverse': props.direction }" :style="{ 'borderRadius': `${props.height/2}rpx`, 'width': `${ props.percent}%`, 'backgroundColor': props.activeColor }">
			<view v-if="props.isDisplayText">{{ props.percent }}%</view>
		</view>
	</view>
</template>

<script setup>
import { ref, defineProps } from 'vue'

const props = defineProps({
	percent: {
		type: Number,
		default: 20
	},
	activeColor: {
		type: String,
		default: 'ref'
	},
	isDisplayText: {
		type: Boolean,
		default: true
	},
	inactiveColor: {
		type: String,
		default: '#f2f2f2'
	},
	height: {
		type: Number,
		default: 40
	},
	direction: {
		type: Boolean,
		default: false
	}
})

</script>

<style lang="scss">
.progress-box {
	height: 40rpx;
	border-radius: 20rpx;
	overflow: hidden;
	position: relative;
	width: 100%;
	.progress-box-active {
		position: absolute;
		height: 100%;
		background-color: red;
		border-radius: 20rpx;
		display: flex;
		font-size: 25rpx;
		flex-direction: row-reverse;
		align-items: center;
		box-sizing: border-box;
		padding-right: 20rpx;
		color: #fff;
		&.reverse {
			right: 0;
			flex-direction: row;
			padding-left: 20rpx;
			padding-right: 0;
		}
	}
}
</style>